<template>
  <div>
    <el-calendar v-model="value" v-if="isCalendar"> </el-calendar>
  </div>
</template>
<script>
export default {
  name: "calendarSelect",
  components: {},
  data() {
    return {
      value: new Date(),
      isCalendar: true,
    };
  },
  methods: {
    changeHide() {
      this.isCalendar = false;
    },
    changeVisible() {
      this.isCalendar = true;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style lang="less" scoped>
div {
  width: 100%;
}
.el-calendar {
  width: 100%;
}

.el-calendar /deep/ .el-calendar-day {
  height: 36px !important;
  padding: 10px 12px;
  //   text-align: center;
  font-size: 14px;
  &:hover {
    color: #f79823;
  }
}
.el-calendar /deep/ .el-calendar__header {
  height: 48px;
  padding: 0 16px;
  line-height: 48px;
  background-color: rgb(236, 236, 236) !important;
}
.el-calendar /deep/ .is-today {
  color: #f79823;
}
.el-calendar /deep/ .is-selected {
  background-color: #f79823;
  color: #fff;
}
</style>
